<template>
  <div class="tree_content">
    <!-- 1.树有标题时，.surface-title v-show为true -->
    <div class="surface-search">
      <a-input-search :allow-clear="true" placeholder="请输入名称搜索" style="width: calc(100%-32px)" @search="handleSearchTree" />
      <!-- 1.树没有标题时，.opt-icon v-show为true -->
      <a-button v-show="false" class="opt-icon" @click="getTreeListData">
        <template #icon>
          <SyncOutlined />
        </template>
      </a-button>
      <!-- <a-button class="tittle-opt-icon" @click="getTreeListData" type="text">
        <template #icon>
          <SyncOutlined />
        </template>
      </a-button> -->
    </div>
    <div class="tree_box">
      <a-spin :spinning="loading">
        <a-tree
          v-if="treeData && treeData.length > 0"
          v-model:expandedKeys="expandedKeys"
          v-model:selectedKeys="selectedKeys"
          :tree-data="treeData"
          :load-data="onLoadData"
          :show-icon="true"
          :show-line="true && { showLeafIcon: false }"
          :default-expand-all="true"
          @expand="onExpand"
          @select="selectNode"
        >
          <template #title="{ dataRef }">
            <span
              :title="
                dataRef.nodeType == 'process' && dataRef.attributes.version
                  ? dataRef.title + '-V' + dataRef.attributes.version
                  : dataRef.title
              "
            >
              {{
                dataRef.nodeType == 'process' && dataRef.attributes.version
                  ? dataRef.title + '-V' + dataRef.attributes.version
                  : dataRef.title
              }}
            </span>
          </template>
          <template #icon="{ expanded, dataRef }">
            <avic-icon v-if="dataRef.id == defaultParentId" svg="avic-server-fill" color="rgb(51 112 255)" />
            <avic-icon v-else-if="expanded && dataRef.nodeType == 'dynamicClassic'" svg="avic-folder-open-fill" color="#FFB800" />
            <avic-icon v-else-if="!expanded && dataRef.nodeType == 'dynamicClassic'" svg="avic-folder-3-fill" color="#ffb800" />
            <avic-icon v-else-if="dataRef.nodeType == 'dynamicApp'" svg="avic-stack-fill" color="#3370ff" />
            <avic-icon v-else-if="dataRef.nodeType == 'dynamicType'" svg="avic-checkbox-multiple-blank-fill" color="#ffb800" />
            <avic-icon v-if="dataRef.nodeType == 'process'" svg="avic-git-pull-request-fill" color="#0fc6c2" />
          </template>
        </a-tree>
        <a-empty v-else :image="simpleImage" />
      </a-spin>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { getTreeList, searchTreeList, searchTreeListByAuth } from '@/api/avic/bpm/BpmModelTreeApi';
import { getSubFlowTreeData } from '@/api/avic/bpm/BpmSubFlowApi';
import { getAllExpandedKeys, getExpandedKeys, setNodeSlots } from '@/utils/tree-util';
import { Empty } from 'ant-design-vue';
import type { TreeProps } from 'ant-design-vue';
const props = defineProps({
  hasAuthEnable: {
    type: Boolean,
    default: false
  },
  hasFlow: {
    type: Boolean,
    default: true
  },
  type: {
    type: String,
    default: null
  }
});
const emit = defineEmits(['onModelTreeSelect', 'afterLoadData']);
const defaultParentId = 'root'; // 树节点默认最高级id
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const defaultRootParentId = '-1';
const loading = ref(false);
const data = reactive({
  treeData: [],
  expandedKeys: [],
  selectedKeys: [],
  selectedTreeNode: {
    nodeId: 'root',
    nodeType: 'dynamicClassic',
    procDefId: ''
  }
});
const { treeData, expandedKeys, selectedKeys } = toRefs(data);
getTreeListData();
function getTreeListData() {
  loading.value = true;
  const expandLevel = 2;
  const parentId = defaultRootParentId;
  data.treeData = [];
  data.expandedKeys = [];
  if (props.type === 'classicAppTree') {
    const treeParams = {
      parentId: defaultParentId,
      level: expandLevel
    };
    getSubFlowTreeData({ data: treeParams })
      .then((response) => {
        setNodeSlots(response.data);
        getExpandedKeys(response.data, expandLevel, data.expandedKeys);
        data.treeData = response.data;
        data.selectedKeys = [response.data[0]?.id];
        emit('onModelTreeSelect', {
          nodeId: response.data[0]?.id,
          nodeType: response.data[0]?.nodeType,
          procDefId: '',
          showLine: ''
        });
        emit('afterLoadData', data);
      })
      .finally(() => {
        loading.value = false;
      });
  } else {
    const treeParam = {
      id: parentId,
      level: expandLevel,
      hasAuthEnable: props.hasAuthEnable,
      hasFlow: props.hasFlow
    };
    getTreeList(treeParam)
      .then((response) => {
        setNodeSlots(response.data);
        getExpandedKeys(response.data, expandLevel, data.expandedKeys);
        data.treeData = response.data as any;
        data.selectedKeys = [response.data[0]?.id];
        emit('onModelTreeSelect', {
          nodeId: response.data[0]?.id,
          nodeType: response.data[0]?.nodeType,
          procDefId: '',
          showLine: ''
        });
        emit('afterLoadData', data);
      })
      .finally(() => {
        loading.value = false;
      });
  }
}
/**
 * 树节点查询
 * @param {Object} value
 */
function handleSearchTree(value: string) {
  if (!value) {
    getTreeListData();
  } else {
    const searchText = {
      searchTxt: value,
      hasAuthEnable: props.hasAuthEnable,
      hasFlow: props.hasFlow
    };
    loading.value = true;
    data.treeData = [];
    data.expandedKeys = [];
    if (props.hasAuthEnable) {
      searchTreeListByAuth(searchText).then((response) => {
        setNodeSlots(response.data);
        getAllExpandedKeys(response.data, data.expandedKeys);
        data.treeData = response.data as any;
        data.selectedKeys = [response.data[0]?.id];
        emit('onModelTreeSelect', {
          nodeId: response.data[0]?.id,
          nodeType: response.data[0]?.nodeType,
          procDefId: ''
        });
        loading.value = false;
      });
    } else {
      searchTreeList(searchText).then((response) => {
        setNodeSlots(response.data);
        getAllExpandedKeys(response.data, data.expandedKeys);
        data.treeData = response.data as any;
        data.selectedKeys = [response.data[0]?.id];
        emit('onModelTreeSelect', {
          nodeId: response.data[0]?.id,
          nodeType: response.data[0]?.nodeType,
          procDefId: ''
        });
        loading.value = false;
      });
    }
  }
}
/**
 * 异步加载树节点
 * @param {Object} treeNode
 */
const onLoadData: TreeProps['loadData'] = (treeNode) =>
  new Promise((resolve) => {
    if (treeNode.dataRef.children) {
      resolve();
      return;
    }
    const treeParam = {
      id: treeNode.dataRef.id,
      level: 1,
      hasAuthEnable: props.hasAuthEnable,
      hasFlow: props.hasFlow
    };
    getTreeList(treeParam).then((response) => {
      setNodeSlots(response.data);
      treeNode.dataRef.children = response.data as any;
      data.treeData = [...data.treeData];
      resolve();
    });
  });
const onExpand = (expandedKeys: string[]) => {
  data.expandedKeys = expandedKeys;
};
/**
 * 树选中事件
 */
function selectNode(selectedKeys: string[], { node }) {
  data.selectedKeys = selectedKeys;
  data.selectedTreeNode.nodeId = node.dataRef.id;
  if (node.dataRef.attributes != null) {
    data.selectedTreeNode.procDefId = node.dataRef.attributes.pdId;
  } else {
    data.selectedTreeNode.procDefId = '';
  }
  data.selectedTreeNode.nodeType = node.dataRef.nodeType;
  if (data.selectedTreeNode.nodeType === 'process') {
    data.selectedTreeNode.nodeId = node.dataRef.attributes?.pdid;
    if (data.selectedTreeNode.nodeId === undefined) {
      data.selectedTreeNode.nodeId = node.dataRef.id;
    }
  } else {
    data.selectedTreeNode.nodeId = node.dataRef.id;
  }
  emit('onModelTreeSelect', data.selectedTreeNode);
}
</script>
